<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>NetPad - Chapter 10</title>
	<link rel="stylesheet" href="/strophe/public/css/jquery-ui-1.8.21.custom.css">
	<link rel="stylesheet" href="/strophe/public/css/netpad.css">
	<script type="text/javascript" src="/strophe/public/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="/strophe/public/js/jquery-ui-1.8.21.custom.min.js"></script>
	<script type="text/javascript" src="/strophe/public/js/strophe.js"></script>
	<script type="text/javascript" src="/strophe/public/js/flXHR.js"></script>
	<script type="text/javascript" src="/strophe/public/js/strophe.flxhr.js"></script>
	<script type="text/javascript" src="/strophe/public/js/optrans.js"></script>
	<script type="text/javascript" src="/strophe/public/js/netpad.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#login_dialog').dialog({
				autoOpen: true,
				draggable: false,
				modal: true,
				title: 'Connect to XMPP',
				buttons: {
					"Connect": function() {
						$(document).trigger('connect', {
							jid: $('#jid').val(),
							password: $('#password').val(),
							collaborator: $('#collaborator').val(),
							server: "${config.boshUrl}"
						});
						
	//		 			$('#password').val('');
						$(this).dialog('close');
					}
				}
			});
			
			$('#disconnect').click(function(ev) {
				if (NetPad.collaborator) {
					NetPad.stopCollaboration();
				}
				
				$('#disconnect').attr('disabled', 'disabled');
				NetPad.connection.disconnect();
			});
			
			$('#input').keypress(function(ev) {
				if (ev.which == 13) {
					ev.preventDefault();
					
					NetPad.log("send message: " + $(this).val());
					
					NetPad.sendMessage('#chat', $(this).val());
					$(this).val('');
				}
			});
			
			if ($('#stop')) {
				$('#stop').click(function() {
					if (NetPad.collaborator) {
						NetPad.stopCollaboration(true);
					}
				});	
			}
			
			$('#pad').keypress(function(ev) {
				NetPad.onKeyPress(this, ev);
			});
		});
	</script>
</head>
<body>
	<h1>NetPad</h1>
	
	<div id='status' class='no-collab'>
		Not collaborating.
	</div>
	<input id='disconnect' type='button' value='disconnect' disabled='disabled'>
	<input id='stop' type='button' value='stop' disabled='disabled'>
	<div class='clear'></div>
	
	<textarea id='pad' disabled='disabled'></textarea>
	
	<div id='chat-area'>
		<div id='chat'></div>
		<input type='text' id='input' disabled='disabled'>
	</div>
	
	<div id='log'></div>
	
	<!-- login dialog -->
	<div id='login_dialog' class='hidden'>
		<label>JID:</label><input type='text' id='jid' value='sejoonlim@${config.xmppDomain}'><br>
		<label>Password:</label><input type='text' id='password' value='welcome1'><br>
		<label>Collaborator:</label><input type='text' id='collaborator'><br><b>* Resource must be given when collaborator is specified.</b>
	</div>
</body>
</html>